<template>
  <div v-if="props.showPopup" class="popup-box">
    <div class="popup-content">
      <div class="list">
        <div v-for="(item, i) in list" :key="i" class="item">
          <div class="index">{{ list.length - i }}</div>
          <div class="flex-1 w-0">
            <div class="title">
              <span>{{ item.productName }}</span>

              <template v-if="item.productType == 10">
                <span v-if="item.unitName">/{{ item.unitName }}</span>
              </template>

              <template v-else-if="item.productType == 20">
                <span v-if="item.specField">{{ item.specField }} </span>
                <span v-if="item.unitName">/{{ item.unitName }}</span>
                <span v-if="item.packSize">({{ item.packSize }})</span>
              </template>

              <template v-else-if="item.productType == 30">
                <span v-if="item.specField">/{{ item.specField }} </span>
                <span v-if="item.specField1">/{{ item.specField1 }}</span>
                <span v-if="item.unitName">/{{ item.unitName }}</span>
              </template>

              <template v-else-if="item.productType == 40">
                <span v-if="item.unitName">/{{ item.unitName }}</span>
              </template>
            </div>
            <up-row class="price-num">
              <up-col :span="6.5">
                <div class="flex items-center">
                  <text
                    >{{
                      (item.promotionPrice || item.retailPrice).toFixed(2)
                    }}
                    / {{ item.unitName }}</text
                  >
                  <text v-if="item.promotionPrice" class="m-l-10 ovl-price">{{
                    item.retailPrice.wtoFixed(2)
                  }}</text>
                </div>
              </up-col>
              <up-col :span="3"> x {{ item.num }} </up-col>
              <up-col :span="2.5">
                ￥{{
                  utils
                    .FloatMul(item.num, item.promotionPrice || item.retailPrice)
                    .wtoFixed(2)
                }}
              </up-col>
            </up-row>
            <div class="good-tips flex items-center m-t-8">
              <text v-if="item.promotionType == 1" class="cu">促</text>
              <text v-if="item.promotionType == 2" class="zhekou">
                限时折扣
              </text>
              <text v-if="item.promotionType == 3" class="zhekou">
                出清立折
              </text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import utils from "@/utils/index.js";
import { ref } from "vue";
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  showPopup: {
    type: Boolean,
    default: false,
  },
});

function open() {}

defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
.popup-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba($color: #000000, $alpha: 0.3);
  // backdrop-filter: blur(20px);
  .popup-content {
    position: absolute;
    left: 0%;
    top: 0%;
    bottom: 0;
    width: 510rpx;
    background: #fff;
    border: 10rpx solid #f5f5f5;
    // padding: 30rpx 40rpx;
    overflow-y: scroll;
    .list {
      .item {
        display: flex;
        padding: 14rpx;
        border: 1rpx solid $uni-border-color-1;
        .index {
          text-align: center;
          width: 30rpx;
          color: $uni-text-color-4;
          font-size: 16rpx;
          font-weight: 700;
          line-height: 28rpx;
        }
        .title {
          font-size: 18rpx;
          font-weight: 700;
          line-height: 28rpx;
          color: $uni-text-color-1;
          margin-bottom: 12rpx;
        }
        .ovl-price {
          text-decoration: line-through;
          color: $uni-text-color-3;
        }
        .good-tips {
          gap: 8rpx;
          font-size: 14rpx;

          .cu {
            width: 20rpx;
            height: 20rpx;
            line-height: 20rpx;
            text-align: center;
            background: #e6a23c;
            color: $uni-text-color-inverse;
          }
          .zhekou {
            border-radius: 2rpx;
            border: 1px solid $uni-color-primary;
            line-height: 20rpx;
            padding: 0 4rpx;
            color: $uni-color-primary;
          }
        }
      }
    }
  }
}
</style>
